<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
		<title>index_0223_03</title>
	</head>
	<body>
		<div id="app1">
			<input type="text" v-model="params.username">
			<span>{{params.username}}</span>
			<div class="mui-input-row mui-radio ">
				<label>男</label>
				<input name="sex" type="radio" value="man" v-model="params.sex">
				<label>女</label>
				<input name="sex" type="radio" value="woman" v-model="params.sex">
			</div>
			<span>{{params.sex}}</span>
			<select v-model="params.birthday">
				<option value ="2020">2020年</option>
				<option value ="2021">2021年</option>
				<option value ="2022">2022年</option>
			</select>
			<span>{{params.birthday}}</span>
			<div class="mui-input-row mui-checkbox ">
				<label>看书</label>
				<input name="hobit" type="checkbox" value="h1" v-model="params.hobit">
				<label>听歌</label>
				<input name="hobit" type="checkbox" value="h2" v-model="params.hobit">
				<label>打球</label>
				<input name="hobit" type="checkbox" value="h3" v-model="params.hobit">
			</div>
			<span>{{params.hobit}}</span>
			<textarea rows="5" cols="25" v-model="params.beizhu">
				
			</textarea>
			<span>{{params.beizhu}}</span>
			<button type="button" @click="submitForm">提交</button>
			
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el: '#app1',
				data: {
					params:{
						username: '',
						sex: 'man',
						birthday: '2020',
						hobit: ['h3','h1'],
						beizhu: '省略',
					}
				},
				methods:{	
					submitForm:function(){
						alert(this.params.username)
						console.log(this.params)
					}
				}
			})
		</script>
		<style>
			
		</style>
	</body>
</html>
